<!DOCTYPE html >
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="csrf-token" content="{{csrf_token()}}">
    <meta name="description" content="{{env('SITE_DESCRIPTION')}}">
    <title>{{env('SITE_TITLE')}}</title>

    <link href="{{asset('/org/site')}}/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="{{asset('/org/site')}}/basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="{{asset('/org/site')}}/css/cartstyle.css" rel="stylesheet" type="text/css"/>
    <link href="{{asset('/org/site')}}/css/optstyle.css" rel="stylesheet" type="text/css"/>
    @include('admin.layouts._hdjs')
    @include('admin.layouts._message')
</head>

<body>
{{--公共的顶部导航和搜索框--}}
@include('site.layouts._top')


<div class="clear"></div>

<style>
    [v-cloak] {
        display: none;
    }
</style>
<!--购物车展示页面vue控制区域 -->
<div class="concent" v-cloak id="mycart" style="margin-top: 10px">
    <div id="cartTable">
        <div class="cart-table-th">
            <div class="wp">
                <div class="th th-chk">
                    <div id="J_SelectAll1" class="select-all J_SelectAll">
                    </div>
                </div>
                <div class="th th-item">
                    <div class="td-inner">商品信息</div>
                </div>
                <div class="th th-price">
                    <div class="td-inner">单价</div>
                </div>
                <div class="th th-amount">
                    <div class="td-inner">数量</div>
                </div>
                <div class="th th-sum">
                    <div class="td-inner">金额</div>
                </div>
                <div class="th th-op">
                    <div class="td-inner">操作</div>
                </div>
            </div>
        </div>
        <div class="clear"></div>

        <tr class="item-list">
            <div class="bundle  bundle-last ">
                <div class="bundle-main">
                    {{--下面注释的部分是使用最常用的@foreach的方式在前台循环展示从后台拿过来的数据的方式--}}
                    {{--
                    @foreach($carts as $cart)
                    (前台需要循环展示后台传递过来的内容的时候,除了可以使用foreach之外还可以使用vue循环展示)购物车展示的内容1
                    <ul class="item-content clearfix">
                        <li class="td td-chk">
                            <div class="cart-checkbox ">
                                <input class="check" id="J_CheckBox_170037950254" name="items[]" value="170037950254" type="checkbox">
                                <label for="J_CheckBox_170037950254"></label>
                            </div>
                        </li>
                        <li class="td td-item">
                            <div class="item-pic">
                                <a href="{{route('site.detail',['goods_id'=>$cart['goods_id'],'product_id'=>$cart['product_id']])}}" target="_blank"  class="J_MakePoint" data-point="tbcart.8.12">
                                    <img src="{{$cart['goods']['pics'][0]}}" width="80px" class="itempic J_ItemImg">
                                </a>
                            </div>
                            <div class="item-info">
                                <div class="item-basic-info">
                                    <a href="{{route('site.detail',['goods_id'=>$cart['goods_id'],'product_id'=>$cart['product_id']])}}" target="_blank"  class="item-title J_MakePoint" data-point="tbcart.8.11">
                                        {{$cart['goods']['title']}}
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="td td-info">
                            <div class="item-props ">
                                <span class="sku-line">规格:{{$cart['product']['attrs']}}</span>
                            </div>
                        </li>
                        <li class="td td-price">
                            <div class="item-price price-promo-promo">
                                <div class="price-content">
                                    <div class="price-line">
                                        <em class="price-original"></em>
                                    </div>
                                    <div class="price-line">
                                        <em class="J_Price price-now" tabindex="0">{{$cart['price']}}</em>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-amount">
                            <div class="amount-wrapper ">
                                <div class="item-amount ">
                                    <div class="sl">
                                        <input id="min_me" class="am-btn am-btn-default" onclick="jian()" name="" type="button" value="-"/>
                                        <input id="text_box_me" onchange="bian(this)" type="text" value="1" style="width:30px;"/>
                                        <input id="add_me"  onclick="jia()" class="am-btn am-btn-default" name="" type="button" value="+"/>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-sum">
                            <div class="td-inner">
                                <em tabindex="0" class="J_ItemSum number">117.00</em>
                            </div>
                        </li>
                        <li class="td td-op">
                            <div class="td-inner">
                                <a title="移入收藏夹" class="btn-fav" href="#">
                                    移入收藏夹</a>
                                <a href="javascript:;" data-point-url="#" class="delete">
                                    删除</a>
                            </div>
                        </li>
                    </ul>
                    @endforeach
                    --}}

                    {{--购物车展示的内容2--}}
                    <ul class="item-content clearfix" v-for="(v,k) in carts">
                        <li class="td td-chk">
                            <div class="cart-checkbox ">
                                <input class="check" v-model="v.checked"
                                       type="checkbox">
                            </div>
                        </li>
                        <li class="td td-item">
                            <div class="item-pic">
                                {{--vue作用区域给a标签加超链接地址的时候需要格外注意--}}
                                <a :href='gethref(v)' target="_blank"
                                   class="J_MakePoint" data-point="tbcart.8.12">
                                    <img v-bind:src="v.goods.pics[0]" width="80px"
                                         class="itempic J_ItemImg">
                                </a>
                            </div>
                            <div class="item-info">
                                <div class="item-basic-info">
                                    <a :href="gethref(v)" target="_blank"
                                       class="item-title J_MakePoint" data-point="tbcart.8.11">
                                        @{{ v.goods.title }}
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="td td-info">
                            <div class="item-props " style="border-width: 0px">
                                <span class="sku-line">
                                    @{{v.product.attrs}}
                                </span>
                            </div>
                        </li>
                        <li class="td td-price">
                            <div class="item-price price-promo-promo">
                                <div class="price-content">
                                    <div class="price-line">
                                        <em class="price-original"></em>
                                    </div>
                                    <div class="price-line">
                                        <em class="J_Price price-now" tabindex="0">
                                            @{{ v.price }}
                                        </em>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-amount">
                            <div class="amount-wrapper ">
                                <div class="item-amount ">
                                    <div class="sl">
                                        <input id="min_me" class="am-btn am-btn-default"
                                               @click.prevent="jian(v)" type="button" value="-"/>
                                        <input id="text_box_me" readonly type="text" :value="v.num"
                                               style="width:30px;"/>
                                        <input id="add_me" class="am-btn am-btn-default" name=""
                                               @click="jia(v)" type="button" value="+"/>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="td td-sum">
                            <div class="td-inner">
                                <em tabindex="0" class="J_ItemSum number">
                                    @{{ v.sum }}
                                </em>
                            </div>
                        </li>
                        <li class="td td-op">
                            <div class="td-inner">
                                <a title="移入收藏夹" class="btn-fav" href="#">
                                    移入收藏夹</a>
                                {{--通过异步的方式删除购物车中的数据,之所以要传递v就是因为js中要发异步,我得告诉后台具体删除购物车中的哪一条数据--}}
                                <a data-point-url="#" @click="delcart(v,k)" class="delete">
                                    删除</a>
                            </div>
                        </li>
                    </ul>

                </div>
            </div>
        </tr>

    </div>
    <div class="clear"></div>
    <div class="float-bar-wrapper">
        <div id="J_SelectAll2" class="select-all J_SelectAll">
            <div class="cart-checkbox">
                {{--
                v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
                单个复选框，绑定到布尔值,因此下面的checkbox复选框当选中的时候allCheck的值会变成true,当未选中的时候allCheck的值为false.反过来也是一样的如果allCheck的值为false那这个复选框就是未选中的,如果值为true那这个复选框就处于选中状态
                --}}
                <input type="checkbox" @change="changeAll" v-model="allCheck">
            </div>
            <span>全选</span>
        </div>
        <div class="operations">
            {{--
            <a  class="deleteAll">删除</a>
            <a   class="J_BatchFav">移入收藏夹</a>
            --}}
        </div>
        <div class="float-bar-right">
            <div class="amount-sum">
                <span class="txt">已选商品</span>
                <em id="J_SelectedItemsCount">@{{ totalNum }}</em><span class="txt">件</span>
                <div class="arrow-box">
                    <span class="selected-items-arrow"></span>
                    <span class="arrow"></span>
                </div>
            </div>
            <div class="price-sum">
                <span class="txt">合计:</span>
                <strong class="price">¥<em id="J_Total">@{{ total }}</em></strong>
            </div>
            {{--结算--}}
            {{--阻止a标签的默认点击事件--}}
            <a class="btn-area" @click.prevent="jiesuan" style="cursor: pointer">
                <span style="color: white;">结&nbsp;算</span>
            </a>
        </div>

    </div>
    {{--公共的底部导航区域--}}
</div>

<script>
    require(['hdjs', 'vue', 'axios'], function (hdjs, vue, axios) {
        new vue({
            el: "#mycart",
            data: {
                carts: @json($carts),
                allCheck: false
            },
            methods: {
                gethref(v) {
                    //在vue作用区域给a标签中的href加超连接地址的时候,如果直接绑定vue数据会导致整个vue作用区域不显示,一种处理方法就是给href绑定一个vue方法,然后在vue的方法中返回要跳转的地址
                    return '/detail/' + v.goods_id + '/' + v.product_id
                },
                jia(v) {
                    //其实加的时候也应该做一个判断只有当前数量小于货品库存数量的时候才发送异步请求
                    if (v.num < v.product.kucun) {
                        axios.get('/axioscart/' + v.product_id + '/1').then((res) => {
                            if (res.data.valid) {
                                v.num += 1;
                                v.sum = v.num * v.price;
                            }
                        })
                    }
                },
                jian(v) {
                    // 当用户在购物车界面进行减操作的时候,需要判断当前数量必须要大于1才能发异步请求
                    if (v.num > 1) {
                        axios.get('/axioscart/' + v.product_id + '/-1').then((res) => {
                            //后台修改成功会返回true,否则会返回false
                            if (res.data.valid) {
                                v.num -= 1;
                                v.sum = v.num * v.price;
                            } else {
                                //进入到这个判断体中说明异步修改异常
                                hdjs.swal({
                                    text: "异步请求修改失败",
                                    button: false,
                                    icon: 'warning'
                                })
                            }
                        })
                    } else {
                        hdjs.swal({
                            text: "再减数量就为0了",
                            button: false,
                            icon: 'error'
                        })
                    }
                },
                delcart(v, k) {
                    // 先给用户一个确认提示
                    if (confirm('确认要删除这个宝贝吗?')) {
                        //然后再发送异步从后台删除数据
                        axios.get('/axiosdelcart/' + v.product_id).then((res) => {
                            if (res.data.valid) {
                                //进入这个判断体中说明后台数据已经删除完,可以给前台用户一个删除成功的提醒
                                //通过vue的方式将前台中的相应内容去除掉
                                this.carts.splice(k, 1);
                                hdjs.swal({
                                    text: res.data.message,
                                    button: false,
                                    icon: 'success'
                                })
                            }
                        })
                    }
                },
                changeAll() {
                    //当全选checkbox选择框状态改变的时候,使用forEach循环将每个item中的checked的值改的和this.allCheck一致
                    this.carts.forEach((v) => {
                        v.checked = this.allCheck
                    })
                },
                //结算方法
                jiesuan() {
                    if (this.total <= 0) {
                        hdjs.swal({
                            text: "选中结算记录后才能结算",
                            button: false,
                            icon: 'error'
                        })
                    } else {
                        let arr = [];
                        this.carts.forEach((v) => {
                            // 判断v.checked是否为真,如果为真就表示某一条购物车中的记录被选中了,需要传递到结算页面中,如果为假就表示没有被选中,这次不结算
                            v.checked ? arr.push(v.id) : ''
                        })
                        // 然后就可以跳转到结算页面中了,并向结算页面传递需要参数arr
                        //由于arr是一个数组作为参数传递不太方便,所以需要先把这个数组使用js的函数转成字符串连接
                        //js中数组的join方法用于将数组中的所有元素放入一个字符串,如果不指定连接符的话默认是逗号
                        arr = arr.join();
                        //然后在js中使用location方法重定向到订单确认页面
                        location.href = "{{route('center.order.index')}}"+ "?cart_id=" + arr;
                    }
                }
            },
            computed: {
                total() {
                    let zongjia = 0;
                    // 在js中也有相应的变量数组的函数
                    this.carts.forEach((v) => {
                        if (v.checked) {
                            zongjia += v.sum * 1;
                        }
                    })
                    return zongjia;
                },
                totalNum() {
                    let zongnum = 0;
                    this.carts.forEach((v) => {
                        if (v.checked) {
                            zongnum += v.num * 1
                        }
                    })
                    return zongnum;
                }
            }
        })
    })
</script>
<div class="clear"></div>
@include('site.layouts._bottom')

<!--操作页面-->

<div class="theme-popover-mask"></div>

<!--引导 -->
<div class="navCir">
    <li><a href="home2.html"><i class="am-icon-home "></i>首页</a></li>
    <li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
    <li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
    <li><a href="{{asset('/org/site')}}/person/index.html"><i class="am-icon-user"></i>我的</a></li>
</div>
</body>
</html>


